<template>
	<view class="content">
		<view class="plate-box">
			<view class="plate-item-box" @click="bindPlugElection(1)">
				<text :style="ZH?'font-weight:bold;':''">综合</text>
			</view>
			<view class="plate-item-box c" @click="bindPlugElection(2)">
				<text :style="lock=='OK'?'font-weight:bold;':''">销量</text>
				<view class="plate-item-icon-box">
					<block v-if="lock=='NO'">
						<image src="/pageIndex/static/icon16.png" mode="widthFix"></image>
						<image src="/pageIndex/static/icon15.png" mode="widthFix"></image>
					</block>
					<block v-if="lock=='OK'">
						<image :src="sele?'/pageIndex/static/icon17.png':'/pageIndex/static/icon16.png'" mode="widthFix"></image>
						<image :src="sele?'/pageIndex/static/icon15.png':'/pageIndex/static/icon18.png'" mode="widthFix"></image>
					</block>
				</view>
			</view>
			<view class="plate-item-box cc" @click="bindPlugElection(3)">
				<text :style="locks=='OK'?'font-weight:bold;':''">价格</text>
				<view class="plate-item-icon-box">
					<block v-if="locks=='NO'">
						<image src="/pageIndex/static/icon16.png" mode="widthFix"></image>
						<image src="/pageIndex/static/icon15.png" mode="widthFix"></image>
					</block>
					<block v-if="locks=='OK'">
						<image :src="seles?'/pageIndex/static/icon17.png':'/pageIndex/static/icon16.png'" mode="widthFix"></image>
						<image :src="seles?'/pageIndex/static/icon15.png':'/pageIndex/static/icon18.png'" mode="widthFix"></image>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				lock:'NO',
				locks:'NO',
				sele:false,
				seles:false,
				ZH:true
			}
		},
		created() {
			
		},
		methods:{
			bindPlugElection(id){
				// console.error(id)
				if(id==2){ // 销量
					this.lock = 'OK';this.locks = 'NO';this.sele = !this.sele;this.ZH = false;this.seles = false;
					this.$emit('getSort',{type:'sales',sort:this.sele?1:2});
				}else if(id==1){ // 综合
					this.lock = 'NO';this.locks = 'NO';this.ZH = true;this.sele = false;this.seles = false;
					this.$emit('getSort',0);
				}else if(id==3){ // 价格
					this.locks = 'OK';this.lock = 'NO';this.seles = !this.seles;this.ZH = false;this.sele = false;
					this.$emit('getSort',{type:'price',sort:this.seles?1:2});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		box-sizing: border-box;
		.plate-box{
			position: fixed;
			width: 100%;
			padding: 20rpx;
			display: flex;
			background: #fff;
			.plate-item-box{
				width: 100%;
				padding: 10rpx 0;
				text-align: center;
				font-size: 26rpx;font-family: Microsoft YaHei;font-weight: 400;color: #333333;
				.plate-item-icon-box{
					display: flex;
					flex-direction: column;
					image{width: 20rpx;height: 20rpx;margin-left: 10rpx;vertical-align: middle;}
				}
			}
			.c{display: flex; justify-content: center;}
			.cc{display: flex; justify-content: flex-end;}
			.plate-item-box:first-child{text-align: left;}
			.plate-item-box:last-child{text-align: right;}
		}
	}
</style>